<template>
  <div class="sub-category">
    <div class="container">
      <!-- 面包屑 -->
      <sub-bread />
      <!-- 筛选区域 -->
      <sub-filter />
      <!-- 结果区域 -->
      <div class="goods-list">
        <!-- 排序 -->
        <SubSort />
        <!-- 列表 -->
        <SubList />
      </div>
    </div>
  </div>
</template>

<script>

import SubBread from './components/sub-bread'
import SubFilter from './components/sub-filter'
import SubSort from './components/sub-sort'
import SubList from './components/sub-list'
import { provide, reactive } from 'vue'
export default {
  name: 'SubCategory',
  components: { SubBread, SubFilter, SubSort, SubList },
  setup () {
    // 附加查询参数
    const filterData = reactive({
      attrs: [], // 一般商品属性
      sortField: null, // 排序
      brandId: null // 品牌ID
    })
    // 设置品牌名称
    function setBrandId (id) {
      filterData.brandId = id
    }
    // 设置条件
    function setAttrsData (attr) {
      // 如果传进来的新数据的groupId和已经加入的有重复,删掉先前的,再添加新的
      const index = filterData.attrs.findIndex(attrItem => attrItem.groupId === attr.groupId)
      if (index > -1) {
        filterData.attrs.splice(index, 1)
      }
      filterData.attrs.push(attr)
    }
    // devtools测试需要点击一下组件
    // 设置排序
    function setSortFieldData (newSortField) {
      filterData.sortField = newSortField
    }
    // 清空数据
    function resetData () {
      filterData.attrs = []
      filterData.sortField = null
      filterData.brandId = null
    }
    provide('filterData', filterData)
    provide('setData', {
      setBrandId,
      setAttrsData,
      setSortFieldData,
      resetData
    })
  }
}
</script>

<style scoped lang='scss'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
</style>
